<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双向绑定</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="num">
    <h2>
        {{name}} 非常帅,
        有{{num}}位女神为他着迷。
    </h2>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    // 生成一个Vue实例
    var app = new Vue({
        el:"#app", // el,即element。要渲染的的页面元素
        data:{ // 数据
            name:"虎哥",
            num:1
        }
    })

    //- 我们在data添加了新的属性：`num`
    //- 在页面中有一个`input`元素，通过`v-model`与`num`进行绑定。
    //- 同时通过`{{num}}`在页面输出

    //- 我们可以观察到，输入框的变化引起了data中的num的变化，同时页面输出也跟着变化。
    //- input与num绑定，input的value值变化，影响到了data中的num值
    //- 页面`{{num}}`与数据num绑定，因此num值变化，引起了页面效果变化。
    //- 没有任何dom操作，这就是双向绑定的魅力。

</script>
</body>
</html>